<template>
  <view class="app">
    <view class="view">
      <appView v-if="indexMenu === 0"/>
      <templateView v-if="indexMenu === 1"/>
      <hostView v-if="indexMenu === 2"/>
      <myView v-if="indexMenu === 3"/>
    </view>
    <view class="menu">
      <view class="item-menu" v-for="(item,index) in menu" :key="index" @click="itemClick(item,index)">
        <image :src="item.icon" :class="index === indexMenu?'index-image':'image'"/>
        <text :class="index ===indexMenu?'index-text':'text' ">{{ item.name }}</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import {setToken} from '@/api/photo'
import {ref} from 'vue'
import indexIcon from '@/static/icon/index.png'
import indexIconSlect from '@/static/icon/index.png'
import templateIcon from '@/static/icon/util.png'
import templateIconSelect from '@/static/icon/util.png'
import hostIcon from '@/static/icon/shop.png'
import hostIconSelect from '@/static/icon/shops.png'
import myIcon from '@/static/icon/my.png'
import myIconSelect from '@/static/icon/Mylaunch.png'
import appView from '@/pages/app/index'
import templateView from '@/pages/template/index'
import hostView from '@/pages/host/index'
import myView from '@/pages/my/index'

setToken('eyJhbGciOiJIUzUxMiJ9.eyJsb2dpbl91c2VyX2tleSI6IjhlNmU2MjBlLTRkYmQtNGNlYi1iNjhhLWQ5ODg5OTAxODJkYSJ9.rjGIhuLdxwTLvSi3p1QqPFwiXoqN6kLFLNZUABTt3BLELZPQq1VOBNshNdFLPBRiW7uyblJ6DvZj-QI5v8GTDA')

const menu = ref([
  {
    name: '首页',
    icon: indexIcon,
    select: indexIconSlect
  },
  {
    name: '模板',
    icon: templateIcon,
    select: templateIconSelect
  },
  {
    name: '历史',
    icon: hostIcon,
    select: hostIconSelect
  },
  {
    name: '我的',
    icon: myIcon,
    select: myIconSelect
  }
])
const indexMenu = ref(0)

const itemClick = (item, index) => {
  indexMenu.value = index
}
</script>

<style lang="scss" scoped>
.app {
  //border: 1px solid red;
  width: 100%;
  height: 100vh;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, rgba(13, 27, 42, 0.9) 0%,
      rgba(27, 38, 59, 0.96) 50%, #0a192f 100%);
  overflow: hidden;
  justify-content: flex-end;

  .view {
    //border: 1px solid red;
    width: 100%;
    height: calc(100% - 120rpx);
  }

  .menu {
    border-top: 1px solid rgb(253, 254, 255);
    //border: 1px solid red;
    width: 100%;
    height: 120rpx;
    display: flex;
    justify-content: center;
    align-items: center;

    .item-menu {
      //border: 1px solid red;
      width: calc(100% / 4);
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      align-items: center;
      position: relative;

      .image {
        width: 60rpx;
        height: 60rpx;
        padding: 8rpx 0;
      }

      .index-image {
        //border: 1px solid red;
        width: 80rpx;
        height: 90rpx;
        position: absolute;
        top: -40rpx;
        background: rgb(43, 124, 238);
        border-radius: 50rpx 50rpx 50rpx 50rpx;
        padding: 15rpx;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        transition: all 0.4s ease-in-out;
      }

      .index-text {
        //border: 1px solid red;
        color: rgb(43, 124, 238);
        width: 100%;
        height: calc(100% - 60rpx);
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .text {
        color: white;
        width: 100%;
        height: calc(100% - 60rpx);
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }
}
</style>